<!DOCTYPE html>
<html>
    <head>

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
        
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Playwrite+DK+Uloopet:wght@100..400&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">

        <meta charset="utf-8">
        <title>七夕节快乐</title>
        <style>
            body{
                margin:0;
                background-image: url('./tupian.jpg');
                background-size: cover;
                background-repeat: no-repeat;
                background-position: 100% 100%;
            }
            .container {
                height: 100vh;
                display: flex;
                justify-content:center;
                align-items: center;
                flex-direction: column;
                position: relative;
            }

            .valentine {
                position: relative;
                animation:up 3s linear infinite;
                cursor: pointer;
            }

            @keyframes up {
                0%,100%{
                    transform: translateY(0);
                }
                50%{
                    transform: translateY(-20px);
                }
            }

            .envelope {
                width:450px ;
                height: 300px;
                background-color: #f08080;
                position: relative;
            }

            .envelope::before {
                content:"";
                width: 318px;
                height: 318px;
                background-color: #f08080;
                position: absolute;
                transform: rotate(-45deg);
                transform-origin: 0 0;
                border-top-right-radius: 30px;
            }

            .front {
                width: 0;
                height: 0;
                border-top: 143px solid transparent;
                border-bottom: 150px solid transparent;
                border-right: 270px solid #f4978e;
                position: absolute;
                top:6px;
                left:180px;
            }

            .front::before {
                content:"";
                position: absolute;
                width: 0;
                height: 0;
                border-top:293px solid transparent;
                border-left: 450px solid #f8ad9d;
                top:-142px;
                left:-180px;
            }

            .card {
                width: 410px;
                height: 255px;
                background-color: #eae2b7;
                position: absolute;
                top:6px;
                left:20px;
                box-shadow: -5px -5px 100px rgb(0 0 0/0.4);
            }

            .txt {
                padding:30px;
                color:#58142d;
                font-size:25px;
                font-family: 'ZCOOL XiaoWei', sans-serif;
            }

            .content {
                margin-left:20px;
                margin-top:30px;
                font-size:20px;
                text-align: center;
            }

            .shadow {
                width: 495px;
                height: 38px;
                background: rgb(0 0 0/0.3) ;
                position: absolute;
                bottom: 120px;
                border-radius: 50%;
                animation: shadow-size 3s linear infinite;
            }

            @keyframes shadow-size {
                0%,100%{
                    transform: scaleX(1);
                }
                50%{
                    transform: scaleX(0.85);
                }
            }
        </style>
        <script src="./jquery.min.js"></script>
    </head>


    <body>
        <div class="container">
            <div class="valentine">
                <div class="envelope"></div>
                <div class="card">
                    <div class="txt"></div>
                </div>
                <div class="front"></div>
            </div>
            <div class="shadow"></div>
        </div>  
    </body>

<script>
    $(".valentine").mouseenter(function() {
        $(".card").stop().animate({
            top: "-200px"
        }, "slow");
        typewriter();
    });

    $(".valentine").mouseleave(function() {
        $(".card").stop().animate({
            top: "0"
        }, "slow");
    });

    function typewriter() {
        const el = $(".txt");
        const str = "To Miss Zheng :<br><br>柔情似水，佳期如梦~<br><br>祝七夕节快乐!<br><br>From emiy";

        let progress = 0;
        const timer = setInterval(function() {
            if (str[progress] === '<') {
                const closeTagIndex = str.indexOf('>', progress) + 1;
                el.html(str.substring(0, closeTagIndex));
                progress = closeTagIndex;
            } else {
                el.html(str.substring(0, progress + 1));
                progress++;
            }
            if (progress >= str.length) {
                clearInterval(timer);
            }
        }, 100);
    }
</script>
    <script src="./yinghua.js"></script>
</html>